/**
 * 定义一个名为HistoricalDevelopment的组件
 * 该组件实现了一个滚动触发的动画效果
 */

const HistoricalDevelopment = {
    // 组件的HTML模板，包含一个标题和一个用于展示内容的div
    template: `
        <div  ref="historicalSection">
            <a href="#">
					<img src="images/fuwai_1.jpg" />
				</a>
        </div>
       

    `,
    
    // 组件挂载时，添加滚动事件监听器
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    },
    
    // 组件销毁前，移除滚动事件监听器，以防止内存泄漏
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    
    // 定义组件的方法
    methods: {
        /**
         * 处理滚动事件的方法
         * 当组件滚动到视口内时，添加一个动画类以展示动画效果
         */
        handleScroll() {
            // 获取组件的引用
            const section = this.$refs.historicalSection;
            // 获取组件相对于视口的位置
            const rect = section.getBoundingClientRect();
            // 判断组件是否在视口内
            if (rect.top <= window.innerHeight && rect.bottom >= 0) {
                // 在组件上添加动画类
                section.classList.add('scale-in');
            }
        }
    }
};

// 定义路由配置，将根路径('/')映射到HistoricalDevelopment组件
const routes = [
    { path: '/', component: HistoricalDevelopment }

];

// 创建一个VueRouter实例，使用上面定义的路由配置
const router = new VueRouter({
    routes
});

// 创建一个Vue应用实例，并挂载到ID为'app'的HTML元素上
const app = new Vue({
    router
}).$mount('#app');